<template>
  <div>
    <v-list-item v-for="(arcticle, index) in arcticles" :key="index" link>
      <v-list-item-content>
        <v-list-item-title v-text="arcticle.title"></v-list-item-title>
        <v-list-item-subtitle v-text="arcticle.content"></v-list-item-subtitle>
      </v-list-item-content>

      <v-list-item-action class="mr-9">
        <v-menu transition="fade-transition">
          <template v-slot:activator="{ on, attrs }">
            <v-btn icon v-bind="attrs" v-on="on">
              <v-icon color="grey lighten-1">mdi-cog-outline</v-icon>
            </v-btn>
          </template>
          <v-list>
            <v-list-item @click="modifyById(arcticle.id)">
              <v-list-item-title class="text-button">修改</v-list-item-title>
            </v-list-item>
            <v-list-item @click="deletebyId(arcticle.id)">
              <v-list-item-title class="text-button">删除</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-list-item-action>
    </v-list-item>

    <!-- 这里是分页按钮的区域 -->
    <v-divider inset></v-divider>
    <div class="text-center ma-4">
      <v-pagination
        v-model="page"
        :length="length"
        :total-visible="7"
        @input="changePage"
      ></v-pagination>
    </div>

    <!-- 这里是消息提示框 -->
    <v-snackbar v-model="snackbar" timeout="3000" color="grey darken-3">
      {{ text }}

      <template v-slot:action="{ attrs }">
        <v-btn color="blue" text v-bind="attrs" @click="snackbar = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
export default {
  name: "adminArcticleList",
  data() {
    return {
      arcticles: [],
      page: 1,
      length: 1,
      snackbar: false,
      text: "",
    };
  },
  methods: {
    changePage(current) {
      this.page = current;
      this.$axios
        .get("arcticle/getArcticlePage", {
          params: {
            current: current,
          },
        })
        .then(
          (res) => {
            this.arcticles = res.data;
          },
          (error) => {
            console.log(error.message);
          }
        );
    },
    modifyById(id) {
      this.showTipMsg("正在跳转");
      this.$router.push({
        name: "updateArcticle",
        query: {
          id: id,
        },
      });
    },
    deletebyId(id) {
      this.$axios.delete("arcticle/deletearcticle/" + id).then((response) => {
        this.changePage(this.page);
        this.showTipMsg(response.data.msg);
        this.getPageData();
      });
    },
    showTipMsg(msg) {
      this.text = msg;
      this.snackbar = true;
    },
    getPageData() {
      this.$axios
        .get("/arcticle/getpagedata", {
          params: {
            current: 1,
          },
        })
        .then(
          (res) => {
            this.length = res.data.data.allPages;
          },
          (error) => {
            console.log(error.message);
          }
        );
    },
  },
  mounted() {
    this.$axios
      .get("/arcticle/getpagedata", {
        params: {
          current: 1,
        },
      })
      .then(
        (res) => {
          this.length = res.data.data.allPages;
        },
        (error) => {
          console.log(error.message);
        }
      );

    this.$axios
      .get("arcticle/getArcticlePage", {
        params: {
          current: 1,
        },
      })
      .then(
        (res) => {
          this.arcticles = res.data;
        },
        (error) => {
          console.log(error.message);
        }
      );
  },
};
</script>

<style scoped>
</style>